@import '../../styles/variables.scss';
@import '../../styles/mixins.scss';

.home-page {
	min-height: 100vh;
	background: $bg-page;
}

// 功能按钮区
.func-buttons {
	display: flex;
	justify-content: space-around;
	padding: $spacing-xl;
	background: #fff;
	margin: $spacing-base 0;

	.func-item {
		@include flex-center;
		flex-direction: column;
		transition: transform $transition-fast;

		&:active {
			transform: scale(0.95);
		}
	}
}

// 公告卡片
.notice-card {
	background: #fff;
	// margin: $spacing-base 0;
	padding: $spacing-base $spacing-xl;
}

// 精选内容区
.featured-section {
	background: #fff;
	padding: $spacing-base $spacing-xl;

	// Tab切换栏
	.content-tabs {
		display: flex;
		margin: 0 (-$spacing-xl);
		padding: 0 $spacing-xl;
		border-bottom: 1px solid $border-light;

		.tab-item {
			flex: 1;
			@include flex-center;
			padding: $spacing-lg 0;
			position: relative;
			transition: all $transition-fast;

			.tab-text {
				font-size: $font-base;
				color: $text-secondary;
				transition: all $transition-fast;
			}

			&.active {
				.tab-text {
					color: $color-primary;
					font-weight: $font-bold;
					font-size: $font-lg;
				}

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: $color-primary;
					border-radius: 2rpx;
				}
			}

			&:active {
				transform: scale(0.95);
			}
		}
	}

	// 帖子列表
	.post-list {
		.post-card {
			// margin: 0 (-$spacing-xl);
			padding: $spacing-lg $spacing-xl;
			border-bottom: 1px solid $border-light;
			transition: background $transition-fast;

			&:last-child {
				border-bottom: none;
			}

			&:active {
				background: $bg-hover;
			}

			// 标签
			.post-tags {
				display: flex;
				align-items: center;
				margin-bottom: $spacing-base;

				.tag {
					padding: 4rpx 16rpx;
					border-radius: $radius-sm;
					font-size: $font-xs;
					margin-right: $spacing-sm;
					font-weight: $font-medium;

					&.tag-discuss {
						background: rgba(102, 126, 234, 0.1);
						color: #667eea;
					}

					&.tag-share {
						background: rgba(72, 187, 120, 0.1);
						color: #48bb78;
					}

					&.tag-trade {
						background: rgba(237, 137, 54, 0.1);
						color: #ed8936;
					}

					&.tag-help {
						background: rgba(159, 122, 234, 0.1);
						color: #9f7aea;
					}

					&.tag-type {
						background: rgba(250, 173, 20, 0.1);
						color: #faad14;
					}
				}
			}

			// 标题
			.post-title {
				display: block;
				font-size: $font-lg;
				font-weight: $font-bold;
				color: $text-primary;
				line-height: $line-height-lg;
				margin-bottom: $spacing-sm;
			}

			// 辅助标签
			.post-meta-tags {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: $spacing-base;

				.meta-tag {
					padding: 4rpx 12rpx;
					background: $bg-page;
					border-radius: $radius-xs;
					font-size: $font-xs;
					color: $text-secondary;
					margin-right: $spacing-sm;
					margin-bottom: $spacing-xs;
				}
			}

			// 内容预览
			.post-content {
				display: block;
				font-size: $font-base;
				color: $text-secondary;
				line-height: $line-height-relaxed;
				@include ellipsis(2);
				margin-bottom: $spacing-base;
			}

			// 图片
			.post-images {
				display: flex;
				margin-bottom: $spacing-base;
				position: relative;

				/* #ifdef H5 */
				:deep(.u-image) {
					margin-right: $spacing-sm;

					&:last-child {
						margin-right: 0;
					}
				}
				/* #endif */
				
				/* #ifndef H5 */
				// 小程序端直接使用 class 选择器
				.u-image {
					margin-right: $spacing-sm;

					&:last-child {
						margin-right: 0;
					}
				}
				/* #endif */

				.more-images {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 220rpx;
					height: 220rpx;
					@include flex-center;
					background: rgba(0, 0, 0, 0.5);
					border-radius: 8rpx;
					color: #fff;
					font-size: $font-xxl;
					font-weight: $font-bold;
				}
			}

			// 底部信息
			.post-footer {
				@include flex-between;

				.author-info {
					display: flex;
					align-items: center;

					.author-name {
						margin-left: $spacing-sm;
						font-size: $font-sm;
						color: $text-secondary;
					}

					.post-time {
						margin-left: $spacing-base;
						font-size: $font-xs;
						color: $text-tertiary;
					}
				}

				.post-stats {
					display: flex;
					align-items: center;

					.stat-text {
						margin-left: $spacing-xs;
						font-size: $font-sm;
						color: $text-tertiary;
					}
				}
			}
		}

		// 加载提示
		.load-more {
			@include flex-center;
			padding: $spacing-xxl;

			.load-text {
				margin-left: $spacing-base;
				font-size: $font-sm;
				color: $text-tertiary;
			}
		}

		.no-more {
			text-align: center;
			padding: $spacing-xxl;
			font-size: $font-sm;
			color: $text-tertiary;
		}
	}
}
